<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.js"></script>
	<link rel="stylesheet" type="text/css" href="MainCSS.css" />

    <script type="text/javascript" src="MainJS.js"></script>
	<script type="text/javascript">
	    function getPhotos(albumID, userName, div) {
	        populatePhotos(albumID, userName, div);
	    }
	    function saveOrder() {
	        var serialStr = "";
	        $("#photosContainer li").each(function(i, elm) { serialStr += (i > 0 ? "|" : "") + $(elm).children().html(); });
	        $("input[name=list1SortOrder]").val(serialStr);
	        alert(serialStr);
	    };
	</script>
</head>
<body>
<div id="menu">
	    <ul>
	        <li>
	            <a href="#photoAlbumDiv" style="text-decoration: none; color: white">
					Albums</a>
	        </li>
	        <li>
	            <a href="#photoDiv" style="text-decoration: none; color: white">
					Photos</a>
	        </li>
	        <li class="space">
	            Space
	        </li>
	        <li>
	            <a href="#uploadDiv" style="text-decoration: none; color: white">
					Upload</a>
	        </li>
	    </ul> 
	</div>
	<div class="clearer"></div>
<div id="main-contener">
<ul>
    <li><div id="edit-container2" class="edit-container"></div></li>
</ul>

				<div id="photoDiv"> 
				 <ul id="photosContainer" listidx="0">
		                <li id="photo1" onmouseup="edit(1,'title','description', 'dateTaken');">
		                    <div class="image-holder"><img src="photos/Steven/CP00001.jpg"></div>
		                    <span style="display:none">Title: Cell phone 1  Description:  asdf  Date taken: 5/2/2010</span>
		                    <div id="edit-container1" class="edit-container"></div>
		                </li>
		                <li id="photo2" onmouseup="edit(2);">
		                    <div class="image-holder"><img src="photos/Steven/CP00002.jpg"></div>
		                    <span>Title: Cell phone 1  Description:  asdf  Date taken: 5/2/2010</span>
		                    <div id="edit-container2" class="edit-container"></div>
		                </li>
		                <li><img src="photos/Steven/CP00003.jpg"><span>Title: Cell phone 1  Description:  asdf  Date taken: 5/2/2010</span></li>
		                <li><img src="photos/Steven/CP00004.jpg"><span>Title: Cell phone 1  Description:  asdf  Date taken: 5/2/2010</span></li>
		                <li><img src="photos/Steven/CP00005.jpg"><span>Title: Cell phone 1  Description:  asdf  Date taken: 5/2/2010</span></li>
		                <li><img src="photos/Steven/CP00006.jpg"><span>Title: Cell phone 1  Description:  asdf  Date taken: 5/2/2010</span></li>
		                <li><img src="photos/Steven/CP00007.jpg"><span>Title: Cell phone 1  Description:  asdf  Date taken: 5/2/2010</span></li>
		                <li><img src="photos/Steven/CP00008.jpg"><span>Title: Cell phone 1  Description:  asdf  Date taken: 5/2/2010</span></li>
		                <li><img src="photos/Steven/CP00009.jpg"><span>Title: Cell phone 1  Description:  asdf  Date taken: 5/2/2010</span></li>
		                <li><img src="photos/Steven/CP000010.jpg"><span>Title: Cell phone 1  Description:  asdf  Date taken: 5/2/2010</span></li>
		                <li><img src="photos/Steven/CP000011.jpg"><span>Title: Cell phone 1  Description:  asdf  Date taken: 5/2/2010</span></li>
		                <li><img src="photos/Steven/CP000012.jpg"><span>Title: Cell phone 1  Description:  asdf  Date taken: 5/2/2010</span></li>
	                </ul>   
				</div>
</div>

	<!-- save sort order here which can be retrieved on server on postback -->
	<input name="list1SortOrder" type="hidden" />
	<input type="hidden" id="isSortting" value="false"/>
	<script type="text/javascript">

	    $(function() {

	        $("#photosContainer").sortable({
	            start: function(event, ui) { $('#isSortting').val('true'); },
	            stop: function(event, ui) { $('#isSortting').val('false'); }
	        });
	    });
	    
	</script>
	
	<div style="clear:both;"></div>
	
	
	
</body>
</html>
